import {
	createRouter,
	createWebHashHistory
} from 'vue-router'
import User from './views/User.vue'
import UserHome from './views/UserHome.vue'
import UserProfile from './views/UserProfile.vue'
import UserPosts from './views/UserPosts.vue'
import HelleVue from './views/HelleVue.vue'
import Index from './views/Index.vue'
import ReactiviteTest from './views/ReactiviteTest.vue'
import jsTest from './views/jsTest.vue'
import jsTest2 from './views/jsTest2.vue'
import jsTest3 from './views/jsTest3.vue'
import cssTest from './views/cssTest.vue'
import nextTickTest from './views/nextTickTest.vue'
import mittTest from './views/mittTest.vue'
import userDefine from './views/userDefine.vue'
import asyncPoolTest from './views/asyncPoolTest.vue'
import detailsTest from './views/detailsTest.vue'
import DragTest from './views/DragTest.vue'
import cssTestTwo from './views/cssTestTwo.vue'
import uploadTest from './views/uploadTest.vue'
import ModalButtonTest from './views/ModalButtonTest.vue'
import promiseAllTest from './views/promiseAllTest.vue'
import stickyTop from './views/stickyTop.vue'
import htmlTag from './views/htmlTag.vue'
import svgTest from './views/svgTest.vue'

export const router = createRouter({
	history: createWebHashHistory(),
	routes: [{
			path: '/',
			name: '主页-index',
			component: Index,
			redirect: '/index' 
		},
		{
			path: '/index',
			name: 'index',
			component: Index,
		},
		{
			path: '/hello',
			name: 'vue3测试',
			component: HelleVue,
		},
		{
			path: '/reactivitetest',
			name: 'ref的原理+reactive',
			component: ReactiviteTest,
		},
		{
			path: '/jstest',
			name: 'jstest',
			component: jsTest,
		},
		{
			path: '/jstest2',
			name: 'jstest2',
			component: jsTest2,
		},
		{
			path: '/jsTest3',
			name: 'jsTest3',
			component: jsTest3,
		},
		{
			path: '/csstest',
			name: 'csstest',
			component: cssTest,
		},
		{
			path: '/nextticktest',
			name: 'nextTick使用场景+原理+模拟',
			component: nextTickTest,
		},
		{
			path: '/mitttest',
			name: 'Vue3推荐使用mitt进行组件通信',
			component: mittTest,
		},
		{
			path: '/userdefine',
			name: 'vue3自定义指令',
			component: userDefine,
		},
		{
			path: '/asyncpooltest',
			name: '实现并发控制+手写Promise.all+手写Promise.race',
			component: asyncPoolTest,
		},
		{ 
			path: '/detailstest',
			name:'details+summary实现折叠菜单功能+获取多个DOM元素',
			component: detailsTest,
		},
		{
			path: '/dragtest',
			name: '移动端的拖拽效果,使用touch事件+requestAnimationFrame进行实现',
			component: DragTest,
		},
		{
			path: '/csstesttwo',
			name: 'csstesttwo',
			component: cssTestTwo,
		},
		{
			path: '/uploadtest',
			name: 'input自定义样式实现图片上传',
			component: uploadTest,
		},
		{
			path: '/modalbuttontest',
			name: 'teleport使用+父组件监听子组件生命周期', 
			component: ModalButtonTest,
		},
		{
			path: '/promiseAllTest',
			name: 'promiseAllTest', 
			component: promiseAllTest,
		},
		{
			path: '/stickyTop',
			name: 'CSS sticky实现返回顶部',
			component: stickyTop,
		},
		{
			path: '/htmlTag',
			name: '你可能不知道的强大 HTML 属性',
			component: htmlTag,
		},
		{
			path: '/svgTest',
			name: 'svgTest',
			component: svgTest,
		},
		{
			path: '/users/:username',
			component: User,
			name: '级联路由',
			children: [
				// UserHome will be rendered inside User's <router-view>
				// when /users/:username is matched
				{
					path: '',
					component: UserHome
				},

				// UserProfile will be rendered inside User's <router-view>
				// when /users/:username/profile is matched
				// 例如： http://192.168.0.87:3000/#/users/aaa/profile
				{
					path: 'profile',
					component: UserProfile
				},

				// UserPosts will be rendered inside User's <router-view>
				// when /users/:username/posts is matched
				{
					path: 'posts',
					component: UserPosts
				},
			],
		},
	],
})
